var imgs = ["images/image (1).jpg", "images/image (2).jpg", "images/image (3).jpg", "images/image (4).jpg", "images/image (5).jpg", "images/image (6).jpg", "images/image (7).jpg"];
var imageIndex = 1;
var timerId;
function slideImage() {
	$("#bigImage").fadeOut("slow", function() {
		$(this).attr("src", imgs[imageIndex]).fadeIn("slow");
		if(imageIndex >= imgs.length - 1 || imageIndex <= -1) {
			imageIndex = 0;
		} else {
			imageIndex++;
		}
	});
}

$(function() {
	timerId = setInterval(slideImage, 4000);
	var $bigImage = $("#bigImage");
	$(".thumbnail1").click(function() {
		clearInterval(timerId);
		timerId = setInterval(slideImage, 4000);
		$(this).css("border", "2px solid red");
		var src = $(this).attr("src");
		$bigImage.fadeOut("fast", function() {
			$bigImage.attr("src", src);
		});
		$bigImage.fadeIn("fast");
		imageIndex =number_regex(src) ;
	});
	$(".thumbnail1").mouseleave(function() {
		$(this).css("border", "none");
	});
	$('#previous').click(function() {

		var temp = imageIndex;
		if(temp == 0) {
			imageIndex = imgs.length - 2;
		}
		if(temp == 1) {
			imageIndex = imgs.length - 1;
		}
		if(temp >= 2) {
			imageIndex -= 1;
		}

		$("#bigImage").fadeOut("fast", function() {
			console.log(imageIndex);
			$(this).attr("src", imgs[imageIndex]).fadeIn("fast");
		});
		clearInterval(timerId);
		timerId = setInterval(slideImage, 4000);
	});
	$('#next').click(function() {
		clearInterval(timerId);
		timerId = setInterval(slideImage, 4000);
		$("#bigImage").fadeOut("fast", function() {
			//imageIndex++;
			console.log(imageIndex);
			$(this).attr("src", imgs[imageIndex]).fadeIn("fast");
			imageIndex++;
			if(imageIndex > imgs.length - 1) {
				imageIndex = 0;
			}
		});
	});
});

function number_regex(str){
	var patter = str ;
	var patt1=/[0-9]/g;
	return patter.match(patt1) ;
}
